


Kingstagram Work Skin for AO3 - CSS and Guide

by nigecha



Category: Kingdom Hearts
Genre: Fanwork Research & Reference Guides, Gen, Work Skin
Language: English
Status: Completed
Published: 2019-02-10
Updated: 2019-02-10
Packaged: 2019-10-25 14:14:17
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 1,661
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/17726762
Author URL: https://archiveofourown.org/users/nigecha/pseuds/nigecha
Summary: A Work Skin based off of “Kingstagram” from Kingdom Hearts 3 for use in fics! There’s some live examples, and a little guide on how to use it and edit it to your liking.





	Kingstagram Work Skin for AO3 - CSS and Guide

(If it's not displaying correctly, you may need to click "Show Creator's Style" up the top)

  * 

  * Sora




With this Work Skin, you can make "Kingstagram" posts for your fics...! 

#OrAtLeastSomethingThatLooksVaguelyLikeThem

  

  *   
Kairi

  


You can also do comments, and replies to comments...! 

  * Riku

  


The font is off, but most people won’t have the correct font installed, and AO3 doesn’t allow custom external fonts, so here we are :/ 




  


  * 

  * You can also do DMs



  * There's a bunch of avatars included as well




  


  * But tbh I made them pretty lazily and quick, so feel free to replace them with something else.




  


# How do I do this?

If you’re unfamiliar with Work Skins, it’s CSS that you can use to style a fic.

You can grab the CSS code for the Work Skin here:

[ https://pastebin.com/VbWv3xYC ](https://pastebin.com/VbWv3xYC)

To add this as a Work Skin:

  * Go to your Dashboard
  * On the left hand side, click Skins
  * Click “My Work Skins”
  * And then click “Create Work Skin”



Set the title as whatever you want, and then you can paste the code from that link into the CSS box.

Now, when you go to post a new work, in the “Select Work Skin” drop down menu, your new Work Skin should be an option. Make sure you select have it selected for any fic you want to use it in.

# Setting up the HTML 

We’ll have to do some stuff with HTML to make it work.

I HIGHLY suggest setting up the HTML outside of AO3, and pasting it into the HTML of your fic at the end once everything else is completed. This is because multiple edits seems to make AO3 mess up the HTML.

[ Scratchpad ](http://scratchpad.io) is a great website to set it up on, because you can preview it in real time. It might look slightly different once its on AO3, but it’ll be the same for the most part.

If you wanna set it up on Scratchpad, replace the parts in the default set up it gives you between <style> and </style> with the CSS code from the pastebin above, and then you can delete everything below </style>, which will be where we write our HTML.

# Posts

Here's a template you can use for posts.
    
    
    <div class ="kingstagram">  
    
    <ul><li class ="header">  
    
      <span class ="headerimage"></span>  
    
      <span class ="icon"></span>  
    
      <span class ="logo"></span>  
    
    </li></ul>  
    
      
    
    <ul><li class ="postheader">  
    
      <div class="sora"></div>  
    
      <div class="username">Sora</div>  
    
      <div class="symbols"></div>  
    
       
    
      <img class="postimage" src="https://pbs.twimg.com/media/DyxM1-FUUAAUXcg.jpg"></li></ul>  
    
      <div class="posttext">Post goes here<div class="hashtags">#hashtags #go #here</div></div>  
    
      <br>  
    
      <ul><li class="comment">  
    
      <span class="riku"></span><div class="username">Riku</div><br><div class="commenttext">Comments</div></li>  
    
      <br>  
    
      <li class="reply">  
    
      <span class="kairi"></span><div class="username">Kairi</div><br><div class="replytext">Reply</div></li>  
    
      <br>  
    
      </ul>  
    
      </div>

  * 

  * Sora




Post goes here

#hashtags #go #here

  


  * Riku

  


Comments

  

  * Kairi

  


Reply

  



Make sure that whatever tweaks you make, you start with _< div class ="kingstagram">_ and end with _< /div>_

 

The header can be easily removed if you’d prefer it that way. Simply get rid of this part up the top:
    
    
    <ul><li class ="header">  
    
      <span class ="headerimage"></span>  
    
      <span class ="icon"></span>  
    
      <span class ="logo"></span>  
    
    </li></ul>  
    
      
    
    

This part is the bar with the username and avatar of the poster.
    
    
    <ul><li class ="postheader">  
    
      <div class="sora"></div>  
    
      <div class="username">Sora</div>  
    
      <div class="symbols"></div>

Where it says  _ <div class=”sora”> _ , this is the avatar. Change “ _ sora _ ” to any name there’s an avatar set up for in the CSS, making sure to keep it in quotation marks.  
The avatars I’ve included are:

  * Sora
  * Riku
  * Kairi
  * Aqua
  * Terra
  * Ventus
  * Vanitas
  * Namine
  * Xion
  * Roxas
  * Lea
  * Isa
  * Ienzo
  * Vexen
  * Demyx
  * Marluxia
  * Larxene
  * Luxord
  * Xaldin
  * Lexaeus
  * Xigbar
  * Cloud
  * Leon
  * Aerith
  * Yuffie
  * Cid
  * Hayner
  * Pence
  * Olette



Enter the name in lowercase into the code.

This part of the username/avatar bar code above is where you change the username:
    
    
     <div class="username">Sora</div>  
    
      
    
    

_ Sora _ is what you’d change here. Feel free to set it as whatever you like!

And with that, we're done with the username/avatar bar. Now, the next part of the code to edit is right underneath. This is where you put the image for the post.  

    
    
    <img class="postimage" src="https://pbs.twimg.com/media/DyxM1-FUUAAUXcg.jpg"></li></ul>  
    
      
    
    

Change the link in the template to a link to the image you want to use, making sure to keep it in quotation marks.

The next part of the code is the post's text.
    
    
    <div class="posttext">Post goes here<div class="hashtags">#hashtags #go #here</div></div>  
    
      <br>

Change  _ Post goes here  _ to whatever you want, and change  _ #hashtags #go #here _ to whatever you want as well.

If you like the hashtags to be on the same line as the post, instead of the next line, change  _ <div class="hashtags"> _ to  _ <span class="hashtags"> _ _,_ and change the  _ </div> _ straight after it to  _ </span> _ .

You can then write more stuff between the  _ </span> _ and  </div> . You can also afterwards add hashtags that go to the next line as well by adding in a  _< div class="hashtags">#hashtags #go #here</div>_ before that final _ </div> _

This part is the comments section:
    
    
     <ul><li class="comment">  
    
      <span class="riku"></span><div class="username">Riku</div><br><div class="commenttext">Comments</div></li>  
    
      <br>  
    
      <li class="reply">  
    
      <span class="kairi"></span><div class="username">Kairi</div><br><div class="replytext">Reply</div></li>  
    
      <br>  
    
      </ul>

This can be deleted if you don’t want any comments on the post.

The avatar and username comments are changed in the same way as above, basically. Main different is that the part where you change the avatar is a  _ span class _ instead of a  _ div class _ , you change the name in exactly the same way.

**Note:**

Make sure there is a <ul> at the top of the comments section, and a </ul> at the bottom. Any new comments need to be added between these.

The part of the above code for normal comments is this:
    
    
     <ul><li class="comment">  
    
      <span class="riku"></span><div class="username">Riku</div><br><div class="commenttext">Comments</div></li>  
    
      <br>

Which can be repeated for new comments. _Comments_ is the text of the comment, replace it with whatever you’d like.

And this part is for replies to comments:
    
    
     <li class="reply">  
    
      <span class="kairi"></span><div class="username">Kairi</div><br><div class="replytext">Reply</div></li>  
    
      <br>  
    
      </ul>

Which can be repeated for new replies.  _ Reply _ is the text of the reply, replace it with whatever you’d like.

If you’d like part of the comment to go to a new line, you can add a <br>.

And that’s basically it for Posts!

# DMs

Here's a template for DMs
    
    
    <div class ="kingstagram">  
    
    <ul><li class ="header">  
    
      <span class ="headerimage"></span>  
    
      <span class ="icon"></span>  
    
      <span class ="logo"></span>  
    
    </li></ul>  
    
    <ul><li class="leftcontainer">  
    
      <span class="kairi"></span>  
    
      <div class="leftbubble">Left bubble text</div>  
    
    </li></ul>  
    
    <br>  
    
    <ul><li class="rightcontainer">  
    
      <div class="rightbubble">Right bubble text</div>  
    
        <div class="aqua"></div>  
    
    </li><ul>  
    
    <br>  
    
    </div>

  * 

  * Left bubble text




  


  * Right bubble text

  



If you managed to understand how to set up a post fine, then I think you’ll have no problems with DMs.

Like with posts, if you’d like, you can get rid of the header by deleting this part of the code:  

    
    
    <ul><li class ="header">  
    
      <span class ="headerimage"></span>  
    
      <span class ="icon"></span>  
    
      <span class ="logo"></span>  
    
    </li></ul>

The code for the bubbles on the left hand side are:
    
    
    <ul><li class="leftcontainer">  
    
      <span class="kairi"></span>  
    
      <div class="leftbubble">Left bubble text</div>  
    
    </li></ul>  
    
    <br>

Which can be repeated to make more.

Similar to Posts, change the _ kairi _ in _ <span class="kairi"></span> _ to whatever avatar you’d like. Check above for the list.

_ Left bubble text  _ is the contents of the bubble, change it to whatever you’d like! Add in <br> you’d like a part of it to go to a new line.

The code for the bubbles on the right hand side are,
    
    
    <ul><li class="rightcontainer">  
    
      <div class="rightbubble">Right bubble text</div>  
    
        <div class="aqua"></div>  
    
    </li><ul>  
    
    <br>

Which can be repeated to make more.

Change the  _ aqua _ in  _ <div class="aqua"></div> _ to whatever avatar you’d like from the list.

_ Right bubble text _ is the contents of the bubble, change it to whatever you’d like! Add in <br> you’d like a part of it to go to a new line.

And that’s basically it! Make sure any new bubbles you add are pasted in before that final </div>

# Avatars

If you’d like to add new avatars, or change the image for the included avatars, it’s pretty easy. We’ll have to go and edit the Work Skin to do this.

The CSS you pasted in here will look slightly different to the CSS you copied from the pastebin. Namely, there’ll be a bunch of “#workskin”s added at the start of a bunch of things. Don’t worry about it, that’s just something AO3 adds automatically.

The code for the avatars is at the very bottom.   
Here’s what the code for Roxas’s avatar will be,
    
    
    #workskin .roxas {  
    
    background: url("https://i.imgur.com/0XTaIFh.png");  
    
    display: inline-block;  
    
    background-repeat: no-repeat;  
    
    position: relative;  
    
    height: 3em;  
    
    width: 3em;  
    
    background-size: 100%;  
    
    border-radius: 50%;  
    
    }

If you’d like to change the picture for his avatar, simply change the image link in  _ background: url _ to whatever you’d like!

If you’d like to add an additional avatar, you can copy and paste that block of code for Roxas’s avatar down the bottom, change “ _roxas_ ” to whatever name you want it to be (making sure to keep the . at the start), and then change the image link to whatever you want it to be.  
You should then be able to reference that name in the HTML and have their avatar show up!

**Author's Note:**

> I hope this isn’t too confusing a guide! I actually really know very little about CSS and HTML, so I’m not sure if I’ve done this in a strange way or not, haha.
> 
> There’s a great series of Work Skin tutorials made by CodenameCarrot and La_Temperanza that you can find here if you're interested: https://archiveofourown.org/series/458134


End file.
